import React, { Component } from 'react';
import store from '../utils/store';
import { Redirect } from 'react-router-dom';
import { USER_KEY, LOGIN_URL } from '../utils/const.js';
import { Card, Col, Row, Button, notification, Divider } from 'antd';
import userList from '../assets/usr-list.png';
import userListAd from '../assets/user-list-ad.png';
import loginPage from '../assets/login-page.png';
import blank from '../assets/blank.png';
import router from 'umi/router';

export default class MainPage extends Component {
  CardClick = url => {
    if (url) {
      router.push({ pathname: url });
    } else {
      notification.info({
        message: '当前功能正在开发，敬请期待！',
      });
    }
  };

  render() {
    // 如果用户没有登陆, 自动跳转
    const user = store.get(USER_KEY);
    let cardClick = this.CardClick;
    if (user && user.id) {
      return (
        <div style={{ padding: '30px', minWidth: 1080, overflow: 'auto' }}>
          <h1>典型功能演示</h1>
          <Divider />
          <Row gutter={16}>
            <Col span={8}>
              <Card
                hoverable
                style={{ minWidth: 320 }}
                title="用户列表"
                cover={<img alt="example" src={userList}></img>}
              >
                展示用户信息的列表，包含CRUD操作
                <Button
                  type="link"
                  onClick={function(event) {
                    cardClick('/pages/system/user');
                  }}
                >
                  查看
                </Button>
              </Card>
            </Col>
            <Col span={8}>
              <Card
                hoverable
                style={{ minWidth: 320 }}
                title="用户列表--高级查询"
                cover={<img alt="example" src={userListAd}></img>}
              >
                包含高级查询和弹框编辑
                <Button
                  type="link"
                  onClick={function(event) {
                    cardClick('/pages/system/userAd');
                  }}
                >
                  查看
                </Button>
              </Card>
            </Col>
            <Col span={8}>
              <Card
                hoverable
                title="用户登录"
                style={{ minWidth: 320 }}
                cover={<img alt="example" src={loginPage}></img>}
              >
                简单的登录功能
                <Button
                  type="link"
                  onClick={function(event) {
                    cardClick('/login');
                  }}
                >
                  查看
                </Button>
              </Card>
            </Col>
          </Row>
          <Row>
            <Col span={8}>
              <Card
                hoverable
                title="新功能"
                style={{ minWidth: 320 }}
                cover={<img alt="example" src={blank}></img>}
              >
                滨江区最牛逼的新功能
                <Button
                  type="link"
                  onClick={function(event) {
                    cardClick();
                  }}
                >
                  查看
                </Button>
              </Card>
            </Col>
          </Row>
        </div>
      );
    } else {
      return <Redirect to={LOGIN_URL} />;
    }
  }
}
